<template>
    <div>
        <div class="article-list" v-if="list.length">
            <div class="article-item" @mouseenter="mouseEnter(index)" @mouseleave="mouseLeave"
                 v-for="(item, index) in list" :key="'a-' + index">
                <div class="article-img-container">
                    <img :src="item.articleCover" alt="" class="article-img">
                </div>
                <div v-if="hoverIndex === index" class="article-action">
                    <div class="btn btn-edit" @click="handleEdit(item)">编辑</div>
                    <div class="btn btn-detele" @click="handleDelete(item, index)">删除</div>
                    <div class="edit-time">最后修改时间: {{item.changeDay}}</div>
                </div>
                <div class="article-info">
                    <div class="article-title">
                        {{item.articleName}}
                    </div>
                    <div class="article-bottom">
                        <div class="article-time">
                            {{item.createDay}}发布
                        </div>
                        <div class="article-like">
                            <img src="@assets/like.png" alt="" class="like-pic">
                            <div class="like-num">{{item.likeCount}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-else class="block">
            暂无内容
        </div>
    </div>
</template>

<script>
    export default {
        name: "ArticleItem",
        props: {
            articleList: Array,
            articleType: Number
        },
        computed: {
            list() {
                this.articleList.map(item => {
                    let createDay = this.handleTime(item.gmtPublish)
                    let changeDay = this.handleTime(item.gmtModified)
                    item.createDay = createDay
                    item.changeDay = changeDay
                })
                return this.articleList
            },
            
        },
        data() {
            return {
                showAction: false,
                hoverIndex: '',
            }
        },
        methods: {
            mouseLeave() {
                this.hoverIndex = ''
            },
            mouseEnter(index) {
                this.hoverIndex = index
            },
            handleEdit(item) {
                this.$emit('handleEdit', item)
            },
            handleDelete(item, index) {
                this.$parent.showPrompt(item, index)
            },
            handleTime(time) {
                let now = new Date().getTime()
                let cha = parseInt(now - time) / 1000
                let a
        
                let f = parseInt(cha / 60)
                f = f < 1 ? 1 : f
                
                let h = parseInt(cha / 3600)
                h = h < 1 ? 1  : h
        
                let d = parseInt(cha / 3600 / 24)
                d = d < 1 ? 1 : d
        
                let m = parseInt(cha / 3600 / 24 / 30)
                m = m < 1 ? 1 : m
        
                let y = parseInt(cha / 3600 / 24 / 30 / 365)
                y = y < 1 ? 1 : y
        
                if (f > 60) {
                    if (h > 24) {
                        if  (d > 30) {
                            if (m > 12) {
                                a = y + '年前'
                            } else {
                                a = m + '月前'
                            }
                        } else {
                            a = d + '天前'
                        }
                    } else {
                        a = h + '小时前'
                    }
                } else {
                    a = f + '分钟前'
                }
                return a
            }
        }
    }
</script>

<style lang="less" scoped>
    .article-list {
        .flexed(flex-start, center, wrap);
    }
    
    .article-item {
        position: relative;
        width: 216px;
        height: 252px;
        margin-right: 12px;
        margin-bottom: 12px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 10px 0px rgba(112, 83, 6, 0.08);
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
        
        &:nth-child(4n) {
            margin-right: 0;
        }
        
        .article-img-container {
            position: relative;
            width: 216px;
            height: 162px;
            overflow: hidden;
            
            .article-img {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        
        .article-action {
            position: absolute;
            left: 0;
            top: 0;
            width: 216px;
            height: 162px;
            padding-top: 33px;
            background: rgba(0, 0, 0, .5);
            
            .btn {
                width: 76px;
                height: 32px;
                margin: 0 auto;
                border-radius: 4px;
                line-height: 32px;
                text-align: center;
            }
            
            .btn-edit {
                margin-bottom: 8px;
                background: rgba(255, 220, 32, 1);
            }
            
            .btn-detele {
                margin-bottom: 16px;
                background: rgba(255, 255, 255, 1);
            }
            
            .edit-time {
                font-size: 12px;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                text-align: center;
            }
        }
        
        .article-info {
            padding: 11px 16px;
            
            .article-title {
                margin-bottom: 7px;
                height: 40px;
                font-size: 14px;
                font-weight: 500;
                color: rgba(0, 0, 0, 1);
                line-height: 20px;
                .textEllipsis(2);
            }
            
            .article-bottom {
                .flexed(space-between);
                height: 22px;
                
                .article-time {
                    font-size: 14px;
                    font-weight: 300;
                    color: rgba(0, 0, 0, .8);
                }
                
                .article-like {
                    .flexed();
                    font-size: 14px;
                    font-weight: 300;
                    
                    .like-pic {
                        display: block;
                        width: 14px;
                        height: 14px;
                        margin-right: 4px;
                        opacity: .5;
                    }
                    
                    .like-num {
                        font-size: 14px;
                        color: rgba(0, 0, 0, 1);
                    }
                }
            }
        }
    }
    
    .block {
        padding-top: 20px;
        font-size: 20px;
        text-align: center;
    }
</style>
